<template>
  <div class="app-container">
    <!-- 顶部标签页 -->
    <el-tabs v-model="queryParams.warnType" @tab-click="handleTabClick">
      <el-tab-pane v-for="item in warnTypeList" :label="item.label" :name="item.name"></el-tab-pane>
    </el-tabs>

    
    <!-- 搜索筛选区域 -->
    <div class="search-bar">
      <tabDate :tabs="dateTypeTabs" ref="tabDateRef" :type="'list'"></tabDate>
      <!-- <el-select v-model="queryParams.dateType" style="width: 80px;" @change="dateTypeChange" placeholder=" ">
          <el-option v-for="item in dateTypeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
      </el-select> -->
      <!-- <el-date-picker
        v-model="queryParams.dateRange"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        style="width: 250px; margin-right: 10px;"
      ></el-date-picker> -->
      <el-input
        v-model="queryParams.segmentName"
        placeholder="请输入点位名称"
        style="width: 200px; margin-right: 10px;"
      ></el-input>

      <el-button type="primary" @click="queryData">查询</el-button>
      <el-button @click="resetForm">重置</el-button>
      <!-- <el-button @click="exportData">导出</el-button> -->
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%" border v-loading="loading">
      <el-table-column prop="segmentname" label="点位名称" width="150"></el-table-column>
      <el-table-column prop="warnTypeName" label="预警类型" width="150"></el-table-column>
      <el-table-column prop="warntime" label="预警时间" width="180"></el-table-column>
      <el-table-column prop="warnmessage" label="预警信息" show-overflow-tooltip></el-table-column>
      <el-table-column prop="controlSuggestions" label="管控建议" min-width="100" show-overflow-tooltip>
          <template #default="{ row }">
            <div >{{ row.controlSuggestions }}</div>
          </template>
        </el-table-column>
      <el-table-column prop="processingstate" label="预警状态" width="120">
        <template #default="{ row }">
          <span>{{processingstateMap[row.processingstate]}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="handleNode" label="处置节点" width="120"></el-table-column>
      <el-table-column prop="handleStatus" label="处置情况" width="120"></el-table-column> -->
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button size="small" type="text" @click="viewProcess(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px;"
    ></el-pagination>
    <!-- <el-dialog :visible.sync="dialogVisible" width="80%" center append-to-body>
        <el-table :data="detailData" border style="width: 100%">
          <el-table-column  prop="id" label="id"></el-table-column>
          <el-table-column  prop="segmentname" label="点位名称"></el-table-column>
          <el-table-column  prop="warntype" label="预警类型"></el-table-column>
          <el-table-column  prop="warnTypeName" label="预警类型名称"></el-table-column>
          <el-table-column  prop="warnlevel" label="预警级别"></el-table-column>
          <el-table-column  prop="warnLevelName" label="预警级别名称"></el-table-column>
          <el-table-column  prop="itemname" label="报警因子名称"></el-table-column>
          <el-table-column  prop="sampletime" label="监测时间"></el-table-column>
          <el-table-column  prop="warntime" label="预警时间"></el-table-column>
          <el-table-column  prop="warnbegintime" label="预警开始时间"></el-table-column>
          <el-table-column  prop="warnmessage" label="预警信息" width="200"></el-table-column>
          <el-table-column  prop="disposalprocedure" label="处置程序"></el-table-column>
          <el-table-column  prop="processingstate" label="处置程序"></el-table-column>
          <el-table-column prop="processingstate" label="预警状态" width="120">
            <template #default="{ row }">
              <span>{{processingstateMap[row.processingstate]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="attachmentsList" label="视频预警图片" width="200">
            <template #default="{ row }">
              <template v-for="imgsrc in row.attachmentsList">
                <el-image style="width: 100px; height: 100px" :src="imgsrc" fit="contain" :preview-src-list="[imgsrc]"></el-image>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
    </el-dialog> -->
    <el-dialog title="预警详情" :visible.sync="dialogVisible" width="70%" center append-to-body>
        <el-form label-width="120px" size="small">
          <div v-if="detailData && detailData.length > 0">
             <el-row>
            <el-col :span="12">
              <el-form-item label="预警ID：">
                <span>{{ detailData[0].id }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点位名称：">
                <span>{{ detailData[0].segmentname }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预警类型：">
                <span>{{ detailData[0].warnTypeName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预警级别：">
                <el-tag size="small" v-if="detailData[0].warnLevelName">
                  {{ detailData[0].warnLevelName }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="报警因子：">
                <span>{{ detailData[0].itemname }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监测时间：">
                <span>{{ detailData[0].sampletime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预警时间：">
                <span>{{ detailData[0].warntime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预警开始时间：">
                <span>{{ detailData[0].warnbegintime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="预警信息：">
                <div style="padding: 8px 0;">{{ detailData[0].warnmessage }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处置程序：">
                <span>{{ detailData[0].disposalprocedure }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预警状态：">
                <span>{{ processingstateMap[detailData[0].processingstate] }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="视频预警图片：">
                <!-- <div v-if="detailData[0].attachmentsList && detailData[0].attachmentsList.length > 0">
                  <template v-for="(imgsrc, index) in detailData[0].attachmentsList" >
                    <el-image style="width: 200px; height: 150px; margin-right: 10px; margin-bottom: 10px;" :src="imgsrc" fit="contain" :preview-src-list="[imgsrc]"></el-image>
                  </template>
                </div> -->
                <!-- <span v-else>暂无图片</span> -->
                <!-- <img style="width: 200px; height: 150px; margin-right: 10px; margin-bottom: 10px;" src="./detail.png"/> -->
                <el-image style="width: 200px; height: 150px;margin-right: 10px; margin-bottom: 10px;" :src="require('./detail.png')" :preview-src-list="[require('./detail.png')]"></el-image>
              </el-form-item>
            </el-col>
          </el-row>
          </div>
         
        </el-form>
        <div slot="footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {getWarnVideoList} from './api'
import tabDate from '../../../components/viewComponents/tabDate/tabDate.vue'
export default {
  name: 'WaterMonitoringAlert',
  components: { tabDate },
  data() {
    return {
      queryParams: {
        warnType: 'all',
        segmentName:'',
        dateType:'0',
        dateRange:[],
        pageSize: 10,
        pageNum: 1
      },
      warnTypeList:[
        { label: '全部', name: 'all' },
        { label: '水体颜色预警', name: '201' },
        { label: '河面漂浮物预警', name: '202' },
        { label: '区域入侵预警', name: '203' },
        { label: '河岸垃圾预警', name: '204' },
      ],
      dateTypeTabs:[
        {value:'date',name:'按天'},
        {value:'month',name:'按月',},
        {value:'year',name:'按年'},
      ],
      processingstateMap:{
        "0":'未处理',
        "1":'处理中',
        "2":'已处理',
        "3":'已关闭'
      },
      tableData: [],
      detailData:[],
      dialogVisible:false,
      total: 0,
      loading:false
    }
  },
  computed: { 
    apiParams(){
      // let beginTime,endTime;
      // if(this.queryParams.dateType==='0'){
      //   beginTime = this.queryParams.dateRange[0];
      //   endTime = this.queryParams.dateRange[1];
      // } else if(this.queryParams.dateType==='1'){
      //   beginTime = $moment(this.queryParams.dateRange[0]).format('{yyyy}-{mm}');
      //   endTime = $moment(this.queryParams.dateRange[1]).format('{yyyy}-{mm}');
      // } else if(this.queryParams.dateType==='2'){
      //   beginTime = $moment(this.queryParams.dateRange[0]).format('{yyyy}');
      //   endTime = $moment(this.queryParams.dateRange[1]).format('{yyyy}');
      // }
      let dateMap = {
        date: '0',
        month: '1',
        year: '2'
      }
      let dateRange = this.$refs.tabDateRef.getDateValue();
      let beginTime = dateRange[0], endTime = dateRange[1];
      let dateTab = this.$refs.tabDateRef.tabValue
      let dateType = dateMap[dateTab];
      let warnType = this.queryParams.warnType == 'all' ? '' : this.queryParams.warnType;
      return {
        beginTime,
        endTime,
        warnType:warnType,
        segmentName:this.queryParams.segmentName,
        dateType,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      }
    }
  },
  created() { 
    // let beginTime = $moment().offset('day',-7).format('{yyyy}-{mm}-{dd}');
    // let endendTime = $moment().format('{yyyy}-{mm}-{dd}');
    // this.queryParams.dateRange = [beginTime, endendTime];
    // this.getList();
  },
  mounted() { 
    this.getList();
  },
  methods: {
    handleTabClick() {
      this.getList();
    },
    dateTypeChange(val){
      let beginTime,endendTime;
      endendTime = $moment().format('{yyyy}-{mm}-{dd}');
      if(val == 0){
        beginTime = $moment().offset('week',-1).format('{yyyy}-{mm}-{dd}');
      } else if(val == 1){
        beginTime = $moment().offset('month',-1).format('{yyyy}-{mm}-{dd}');
      } else if(val == 2){
        beginTime = $moment().offset('year',-1).format('{yyyy}-{mm}-{dd}');
      }
      this.queryParams.dateRange = [beginTime, endendTime];
    },
    getList(){
      this.loading = true;
      getWarnVideoList(this.apiParams).then(res =>{
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      })
    },
    queryData() {
      this.getList();
      console.log('执行查询:', this.dateRange, this.timeUnit, this.pointName, this.alertStatus);
    },
    resetForm() {
        this.queryParams = {
        warnType: '',
        segmentName:'',
        dateRange:[],
        dateType:'0',
        pageSize: 10,
        pageNum: 1
      };
      let beginTime = $moment().offset('day',-7).format('{yyyy}-{mm}-{dd}');
      let endendTime = $moment().format('{yyyy}-{mm}-{dd}');
      this.queryParams.dateRange = [beginTime, endendTime];
      this.getList();
    },
    exportData() {
      console.log('执行导出功能');
    },
    viewProcess(row) {
      this.detailData = [row];
      this.dialogVisible = true;
      console.log('查看流程:', row);
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}

.el-tabs {
  margin-bottom: 20px;
}
</style>